<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页</title>

 
</head>

<body>
  <section class="w-screen">
    <header>
        心情惬意,来杯咖啡吧☕
    </header>
   <div class="lunbotu">
    <div id="Box">
      <div class=" show baoguo">
        <img src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_feb2427d-ca7e-42db-a34e-9ff635006ce3.png" alt="" class="img show">
      </div>
      <div class="baoguo">
        <img src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_85819d0d-0878-4e92-95a8-a944799b631e.png" alt="" class="img">
      </div>
      <div class="baoguo">
        <img src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg" alt="" class="img">
      </div>
      <!--上一张按钮-->
      <span class="prev" ><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-scroll-right.svg" alt=""></span>
      <!--下一张按钮-->
      <span class="next" ></span>
    
      
    </div>
   </div>
   <div class="datupi">
    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" alt="">
  </div>
  <div class="datupi">
    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg" alt="">
  </div>

  <div class="datupi">
    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-new.png" alt="">
  </div>

  <div class="julebu">
    <h2>星享俱乐部</h2>
    <p>开启您的星享之旅，星星越多、会员等级越</p>
    <p>高、好礼越丰富。<span>了解更多></span></p>
    <div class="yipai">
      <div>注册</div>
      <div>登录</div>
    </div>
    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg">
  </div>

  <div class="jinxuan">
     <h2>星巴克精选</h2>
     <p>在星巴克天猫旗舰店发现更多咖啡心意</p>
     <div class="grid">
        <div class="libao">
            <div class="baiban">
                <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
                <h3>会员新礼包</h3>
                <p>星享卡新升级</p>
                <p>更多心意好礼</p>
                <span>了解更多></span>
            </div>
            
        </div>
        <div class="libao">
          <div class="baiban">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-02.png" alt="">
              <h3>星列表</h3>
              <p>星享卡新升级</p>
              <p>更多心意好礼</p>
              <span>了解更多></span>
          </div>
          
      </div>
      <div class="libao">
        <div class="baiban">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png" alt="">
            <h3>电子产品卷</h3>
            <p>星享卡新升级</p>
            <p>更多心意好礼</p>
            <span>了解更多></span>
        </div>
        
    </div>
    <div class="libao">
      <div class="baiban">
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-reserve.png" alt="">
          <h3>咖啡生活</h3>
          <p>星享卡新升级</p>
          <p>更多心意好礼</p>
          <span>了解更多></span>
      </div>
      
  </div>
     </div>
  </div>

  <div class="kafei">
      <h3>1912 派克街 | 咖啡星讲堂</h3>
      <p>了解更多星巴克咖啡文化</p>
      <ul class="lunbo2" style="left: 0;">
         <li>
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-4-fundamentals-kv.jpg" alt="">
            <p>咖啡的起源与栽培</p>
            <span>咖啡知识</span>
         </li>
         <li>
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-pour-over-kv.jpg" alt="">
          <p>咖啡调剂</p>
          <span>咖啡评鉴</span>
         </li>
         <li>
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-roast-story-kv.jpg" alt="">
          <p>咖啡知识</p>
          <span>咖啡烘培</span>
         </li>
         <li>
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-pour-over-kv.jpg" alt="">
          <p>手冲咖啡</p>
          <span>咖啡评鉴</span>
         </li>
      </ul>
      <div class="left" ><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-scroll-right.svg" alt="" style=" transform: rotate(180deg); margin-top: 3vw"></div>
      <div class="right"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-scroll-right.svg" alt="" style="margin-top: 3vw"></div>
  </div>
  <div class="license">
    <span>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402000253" target="_blank">
        <img width="10" height="10" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/icpicon.png">&nbsp;沪公网安备 31010402000253号
      </a>
    </span>
    |
    <a href="http://beian.miit.gov.cn" target="_blank">沪ICP备17003747号-1</a>
  </div>
  </div>

  <div class="footer">
    <div class="footer_fang">
      <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-home-active.svg" alt="">
      <p><a href="../home.html" style="color: #00a862;"> 主 页 </a></p>
    </div>
    <div class="footer_fang">
      <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-stores.svg" alt="">
      <p><a href="../store.html"> 门 店 </a></p>
    </div>
    <div class="footer_fang">
      <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-account.svg" alt="">
      <p><a href="../account.html">我的账户</a></p>
    </div>
    <div class="footer_fang">
      <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-menu.svg" alt="">
      <p><a href="../menu.html"> 菜 单 </a></p>
    </div>
    <div class="footer_fang">
      <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-more.svg" alt="">
      <p><a href="../more.html"> 更 多 </a></p>
    </div>
  </div>
 </section>
</body>

</html>